<style>
    .per-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-left: 20px;
    }
    .avatar-bg {
        display: inline-block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        font-size: 18px;
        margin-left: 20px;
        color:#fff;
        line-height: 40px;
        text-align: center;
    }
</style>
<template>
    <div :class="[className]">
        <img :src="this.thumbAvatar" :alt="this.name" v-if="this.avatar" class="per-icon">
        <div class="avatar-bg" :style="{background:randomColor}" v-if="!this.avatar">
            {{this.bgName}}
        </div>
    </div>

</template>
<script>
    export default {
        data() {
            return {
                array:['#fa4f52','#29b6f6', '#81c684', '#f39801', '#adadad']
            }
        },
        props:{
            avatar:String,
            name:String,
            className:{
                type:String,
                default:''
            }
        },
        computed:{
            randomColor() {
                var n = 0;

                function getRandomInt(str) {
                    for(var i = 0; i < str.length; i++) {
                        if(!n) {
                            n = str.charCodeAt(i);
                        } else {
                            n += str.charCodeAt(i);
                        }

                    }
                    return n % 5;
                }
                var index = getRandomInt(this.name);

                return this.array[index];
            },
            bgName() {
                if(this.name.length) {
                    return this.name.slice(-1)
                } else {
                    return this.name;
                }

            },
            thumbAvatar() {
                return this.avatar + '.thumb.jpg';
            }
        }

    }
</script>
